<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('KEPLER')" />
</head>

<body id="top-body">
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">
                    <img src="../static/img/logo.png" alt="Kepler Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">Kepler</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <span class="fa fa-reorder fa-lg"></span>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                    <!--Mega dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="mega-dropdown">
                        <a href="#" class="mega-dropdown-toggle">
                            <span class="fa fa fa-smile-o fa-lg"></span>
                        </a>
                        <div class="dropdown-menu mega-dropdown-menu">
                            <div class="row">
                                <div class="col-sm-4 col-md-3">

                                    <!--Mega menu list-->
                                    <ul class="list-unstyled">
                                        <li class="dropdown-header"><i class="fas fa-fingerprint"></i> Pages</li>
                                        <li><a href="#">Profile</a></li>
                                        <li><a href="#">Search Result</a></li>
                                        <li><a href="#">FAQ</a></li>
                                        <li><a href="#">Sreen Lock</a></li>
                                        <li><a href="#" class="disabled">Disabled</a></li>
                                    </ul>

                                </div>

                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End mega dropdown-->

                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <img class="img-circle img-user media-object" th:src="${session?.CURRENT_USER?.avatarId}" alt="Profile Picture">
                                    <i class="pli-male ic-user"></i>
                                </span>
                            <div class="username hidden-xs" th:text="${session?.CURRENT_USER?.name}">登陆异常</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- User dropdown menu -->
                            <ul class="head-list" id="mainnav-menu-user-center">
                                <li class="bord-btm pad-top">
                                    <a href="menu/center/center">
                                        <i class="fa fa-smile-o fa-lg"></i> 个人中心
                                    </a>
                                </li>
                                <li class="pad-top">
                                    <a href="menu/flow/toDo">
                                        <span class="badge badge-primary pull-right" id="index-todo-count">0</span>
                                        <i class="fa fa-laptop fa-lg"></i> 代办事项
                                    </a>
                                </li>
                                <li>
                                    <a href="menu/flow/record?viewType=1">
                                        <i class="fa fa-file-text-o fa-lg"></i> 已办未结
                                    </a>
                                </li>
                                <li>
                                    <a href="menu/flow/record?viewType=2">
                                        <i class="fa fa-file-text fa-lg"></i> 已办已结
                                    </a>
                                </li>
                                <li>
                                    <a href="menu/flow/draft">
                                        <i class="fa fa-gamepad fa-lg"></i> 我的草稿
                                    </a>
                                </li>
                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout" class="btn btn-primary">
                                    <i class="pli-unlock"></i> Logout
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->

                    <li>
                        <a href="#" class="aside-toggle navbar-aside-icon">
                            <i class="pci-ver-dots"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">


        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->



        <!--ASIDE-->
        <!--===================================================-->
        <aside id="aside-container">
            <div id="aside">
                <div class="nano">
                    <div class="nano-content">

                        <!--Nav tabs-->
                        <!--================================-->
                        <ul class="nav nav-tabs nav-justified">
                            <li class="active">
                                <a href="#asd-tab-1" data-toggle="tab">
                                    <i class="pli-pepper-with-fire"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#asd-tab-2" data-toggle="tab">
                                    <i class="pli-ghost"></i> Report
                                </a>
                            </li>
                            <li>
                                <a href="#asd-tab-3" data-toggle="tab">
                                    <i class="pli-cauldron"></i> 主题
                                </a>
                            </li>
                        </ul>
                        <!--================================-->
                        <!--End nav tabs-->



                        <!-- Tabs Content -->
                        <!--================================-->
                        <div class="tab-content">

                            <div class="tab-pane fade in active" id="asd-tab-1">1</div>

                            <div class="tab-pane fade" id="asd-tab-2">2</div>

                            <div class="tab-pane fade" id="asd-tab-3">
                                <div id="theme-set" class="demo-justify-theme pad-all">
                                    <a href="javascript:void(0)" class="demo-theme demo-a-light add-tooltip" data-theme="theme-light" data-type="a" data-title="(A). Light">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-a-coffee add-tooltip" data-theme="theme-coffee" data-type="a" data-title="(A). Coffee">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-a-prickly-pear add-tooltip" data-theme="theme-prickly-pear" data-type="a" data-title="(A). Prickly pear">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-a-dark add-tooltip" data-theme="theme-dark" data-type="a" data-title="(A). Dark">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-light add-tooltip" data-theme="theme-light" data-type="c" data-title="(C). Light">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-navy add-tooltip" data-theme="theme-navy" data-type="c" data-title="(C). Navy Blue">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-ocean add-tooltip" data-theme="theme-ocean" data-type="c" data-title="(C). Ocean">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-lime add-tooltip" data-theme="theme-lime" data-type="c" data-title="(C). Lime">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-purple add-tooltip" data-theme="theme-purple" data-type="c" data-title="(C). Purple">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-dust add-tooltip" data-theme="theme-dust" data-type="c" data-title="(C). Dust">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-mint add-tooltip" data-theme="theme-mint" data-type="c" data-title="(C). Mint">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-well-red add-tooltip" data-theme="theme-well-red" data-type="c" data-title="(C). Well Red">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-coffee add-tooltip" data-theme="theme-coffee" data-type="c" data-title="(C). Coffee">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-prickly-pear add-tooltip" data-theme="theme-prickly-pear" data-type="c" data-title="(C). Prickly pear">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>
                                    <a href="javascript:void(0)" class="demo-theme demo-c-dark add-tooltip" data-theme="theme-dark" data-type="c" data-title="(C). Dark">
                                        <div class="demo-theme-brand"></div>
                                        <div class="demo-theme-head"></div>
                                        <div class="demo-theme-nav"></div>
                                    </a>

                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </aside>
        <!--===================================================-->
        <!--END ASIDE-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">

                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap">
                                    <div class="pad-btm">
                                        <span class="label label-success pull-right hidden">New</span>
                                        <img class="img-circle img-sm img-border" th:src="${session?.CURRENT_USER?.avatarId}" alt="Profile Picture">
                                    </div>
                                    <a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
                                            <span class="pull-right dropdown-toggle">
                                                <i class="dropdown-caret"></i>
                                            </span>
                                        <p class="mnp-name" th:text="${session?.CURRENT_USER?.name}">欢迎</p>
                                        <span class="mnp-desc" th:text="${session?.CURRENT_USER?.phone}"></span>
                                    </a>
                                </div>
                                <div id="profile-nav" class="collapse list-group bg-trans">
<!--                                    <a href="#" class="list-group-item">-->
<!--                                        <i class="pli-male icon-lg icon-fw"></i> View Profile-->
<!--                                    </a>-->
<!--                                    <a href="#" class="list-group-item">-->
<!--                                        <i class="pli-gear icon-lg icon-fw"></i> Settings-->
<!--                                    </a>-->
<!--                                    <a href="#" class="list-group-item">-->
<!--                                        <i class="pli-information icon-lg icon-fw"></i> Help-->
<!--                                    </a>-->
                                    <a href="/logout" class="list-group-item">
                                        <i class="fa fa-key fa-lg"></i> 退出
                                    </a>
                                </div>
                            </div>


                            <!--Shortcut buttons-->
                            <!--================================-->
                            <div id="mainnav-shortcut" class="hidden">
                                <ul class="list-unstyled">
                                    <li class="col-xs-3" data-content="My Profile">
                                        <a class="shortcut-grid" href="#">
                                            <i class="fa fa-wheelchair fa-lg"></i>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Messages">
                                        <a class="shortcut-grid" href="#">
                                            <i class="fa fa-thumbs-o-up fa-lg"></i>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Activity">
                                        <a class="shortcut-grid" href="#">
                                            <i class="fa fa-chain-broken fa-lg"></i>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Lock Screen">
                                        <a class="shortcut-grid" href="#">
                                            <i class="fa fa-expeditedssl fa-lg"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!--================================-->
                            <!--End shortcut buttons-->


                            <ul id="mainnav-menu" class="list-group">

                                <li id="home">
                                    <a href="menu/sys/dashboard">
                                        <i class="fas fa-grip-horizontal"></i>
                                        <span class="menu-title">
                                                <strong>工作台</strong>
											</span>
                                    </a>
                                </li>

                                <!--菜单递归-->
                                <th:block th:include="this::tree(${menuTree}, 0)"></th:block>
                                <th:block th:fragment="tree(childs, level)">
                                    <li  th:each="menu:${childs}" th:id="${menu.id}" th:class="${menu.visible=='1' ? 'hidden' : ''}" th:data-level="${level}">
                                        <a th:href="${menu.url}" th:target="${menu.target}">
                                            <i th:class="${menu.iconCode}"></i>
                                            <span class="menu-title" th:text="${menu.name}"></span>
                                            <i class="arrow" th:hidden="${#lists.isEmpty(menu.children)}"></i>
                                        </a>
                                        <ul class="collapse" th:unless="${#lists.isEmpty(menu.children)}" th:include="this::tree(${menu.children}, ${level+1})"></ul>
                                    </li>
                                </th:block>

                                <li class="list-divider"></li>

                            </ul>

                        </div>
                    </div>
                </div>
                <!--================================-->
                <!--End menu-->

            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>



    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">
        <div class="show-fixed pull-right">
            You have <a href="#" class="text-bold text-main"><span class="label label-danger">3</span> pending action.</a>
        </div>

        <div class="hide-fixed pull-right pad-rgt">14GB of <strong>512GB</strong> Free.</div>
        <p class="pad-lft">&#0169; 2020 Your Company</p>
    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->

</div>
<!--===================================================-->
<!-- END OF CONTAINER -->


</body>

<!--===================================================-->
<!-- END OF CONTAINER -->

<th:block th:include="include :: footer" />

</html>

<script>

    //主题设置
    $("#theme-set").on("click", "a", function(){

        $("head").find("link[href^='../static/css/themes/']").remove();

        var $theme = $(this);
        var href = "../static/css/themes/type-"+$theme.attr("data-type")+"/"+$theme.attr("data-theme")+".min.css";
        var newCss = '<link href="'+href+'" rel="stylesheet">';
        $("head").append(newCss);
    });

</script>